<template>
  <div>
    <!-- 搜索表单 -->
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item label="车辆品牌">
        <el-select
          v-model="formData.brand"
          placeholder="车辆品牌"
          class="width-120"
        >
          <el-option
            v-for="item in brandList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input
          v-model="formData.brandNum"
          placeholder="请输入车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-select v-model="search_key" placeholder="请选择" class="width-120">
          <el-option label="停车场名称" value="parkingName"></el-option>
          <el-option label="详细区域" value="address"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="keyword"
          placeholder="请输入关键字按Enter搜索"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <TodoTable
      :data="tableData"
      :columns="table_config"
      :pageSize="tablePage.pageSize"
      :pageSizes="tablePage.pageSizes"
      :total="tablePage.total"
      :currentPage="tablePage.currentPage"
      @changePage="handlePageChange"
      @handleSelect="handleSelectChange"
    >
      <template v-slot:operation="slotData">
        <el-button size="small">删除</el-button>
        <el-button size="small">编辑</el-button>
      </template>
      <template v-slot:type="slotData"> </template>
      <template v-slot:status="slotData"> </template>
    </TodoTable>
  </div>
</template>
<script>
  import { cardsBrandFrom } from "@/content/index"
  import TodoTable from "@c/tableData/TodoComTable.vue"
  export default {
    name: "CarsAttr",
    components: { TodoTable },
    data() {
      return {
        formData: cardsBrandFrom,
        brandList: [],
        tableData: [],
        search_key: "",
        keyword: "",
        tablePage: {
          // 当前页数量
          pageSize: 10,
          pageSizes: [10, 20, 30],
          // 当前页
          currentPage: 1,
          // 总数
          total: 1,
        },
        multipleSelection: [],
        // 表格配置
        table_config: {
          thead: [
            {
              label: "操作",
              prop: "operation",
              type: "slot",
              slotName: "operation",
            },
            { label: "车牌号", prop: "parkingName" },
            {
              label: "年检",
              prop: "type",
              type: "slot",
              slotName: "type",
            },
            {
              label: "能源类型",
              prop: "address",
            },
            { label: "停车场", prop: "carsNumber" },
            { label: "发动机号", prop: "carsNumber" },
            { label: "车架号", prop: "carsNumber" },
            { label: "状态", prop: "carsNumber" },
            {
              label: "禁启用",
              prop: "status",
              type: "slot",
              slotName: "status",
            },
          ],
        },
      }
    },
    methods: {
      search() {},
      handleSelectChange(val) {
        this.multipleSelection = val
      },
      handlePageChange(pageSize, currentPage) {
        this.tablePage.pageSize = pageSize
        this.tablePage.currentPage = currentPage
      },
    },
  }
</script>
<style lang='scss'></style>